<template>
  <div class="min-h-screen bg-gray-300 flex items-center justify-center p-4">
    <div class="w-full max-w-md bg-white rounded-2xl shadow-2xl border border-gray-200 p-8">
      <!-- 标题 -->
      <div class="flex justify-center items-center m-4">
        <BriefBlogIcon />
      </div>


      <!-- 切换导航 -->
      <div class="flex items-center justify-center space-x-4 mb-8">
        <span @click="isLogin = true"
          :class="isLogin ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-blue-500'"
          class="pb-1 cursor-pointer transition-colors">
          登录
        </span>
        <span class="text-gray-300">|</span>
        <span @click="isLogin = false"
          :class="!isLogin ? 'text-blue-600 border-b-2 border-blue-600' : 'text-gray-500 hover:text-blue-500'"
          class="pb-1 cursor-pointer transition-colors">
          注册
        </span>
      </div>

      <!-- 登录表单 -->
      <form v-if="isLogin" @submit.prevent="handleLogin" class="space-y-4">
        <div>
          <input type="email" placeholder="邮箱" required v-model="user.email"
            class="w-full px-4 py-2 border-b border-gray-300 focus:outline-none focus:border-blue-500 placeholder-gray-400">
        </div>

        <div>
          <input type="password" placeholder="密码" required v-model="user.password"
            class="w-full px-4 py-2 border-b border-gray-300 focus:outline-none focus:border-blue-500 placeholder-gray-400">
        </div>

        <div class="flex items-center justify-between text-sm">
          <label class="flex items-center space-x-2 text-gray-600">
            <!-- <input type="checkbox" v-model="rememberMe"
              class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
            <span>记住我</span> -->
          </label>
          <a href="#" class="text-blue-600 hover:text-blue-500">忘记密码？</a>
        </div>

        <button type="submit"
          class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors">
          立即登录
        </button>

        <div class="w-full flex justify-between">
          <div></div>
          <button
            class="mt-6 flex items-center px-4 py-2  hover:bg-blue-400 text-gray-600 rounded shadow transition space-x-2">
            <svg t="1749989464517" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="4459" width="40" height="40">
              <path
                d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z"
                p-id="4460"></path>
            </svg>
            <span>QQ登录</span>
          </button>
        </div>
      </form>

      <!-- 注册表单 -->
      <form v-else @submit.prevent="handleRegister" class="space-y-4">
        <div>
          <input type="text" placeholder="用户名" required v-model="user.username"
            class="w-full px-4 py-2 border-b border-gray-300 focus:outline-none focus:border-blue-500 placeholder-gray-400">
        </div>

        <div>
          <input type="email" placeholder="邮箱" required v-model="user.email"
            class="w-full px-4 py-2 border-b border-gray-300 focus:outline-none focus:border-blue-500 placeholder-gray-400">
        </div>

        <div>
          <input type="password" placeholder="密码" required v-model="user.password"
            class="w-full px-4 py-2 border-b border-gray-300 focus:outline-none focus:border-blue-500 placeholder-gray-400">
        </div>

        <button type="submit"
          class="w-full bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition-colors">
          立即注册
        </button>
      </form>

      <!-- 服务条款 -->
      <p v-if="!isLogin" class="mt-4 text-center text-sm text-gray-500">
        点击注册即表示同意
        <a href="#" class="text-blue-600 hover:underline">服务条款</a>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">


// 外部样式
import BriefBlogIcon from '../../public/svg/BriefBlogIcon.vue'
import { ElMessage } from 'element-plus';
// 系统相关
import { ref } from 'vue'
import { useRouter } from 'vue-router';
let router = useRouter()
// 外部接口
import type { UserInter } from '../../ts/types/systemInstance';

// 网络调用
import { login } from '../../ts/axios/system';
import { setCookie } from '../../ts/utils/cookies';

const isLogin = ref(true) //是登陆页面
console.log("发送的数据");

let user = ref<UserInter>({} as UserInter) //用户信息
function handleLogin(){
  console.log(user.value.email);
  console.log(user.value.password);
  // 登录成功设置cookie
  setCookie("briefblog_token", '123', 1)
  router.push("main") //登录成功跳转页面

}

// const handleLogin = async () => {

//   console.log("发送的数据");
//   console.log(user);

//   const data = await login(user.value)
//   console.log("返回数据");
//   if (data.code === 200) {
//     ElMessage.success("登录成功")
//     // 登录成功就跳转
//     router.push("main")
//   } else {
//     ElMessage.info(String(data.message))
//   }
//   console.log(data);

//   // 登录逻辑（待实现）
//   // 1. 加密密码
//   // console.log("点击了按钮");
//   // const encryptedPassword = encrypt(password.value);
//   // console.log("加密后的密码");
//   // 2. 提交表单
//   // console.log('加密后密码:', encryptedPassword);
//   // console.log("\n解密后的密码\n");
//   // console.log("解密后", decrypt(encryptedPassword));
// }

const handleRegister = () => {
  // 注册逻辑（待实现）
  ElMessage.info("注册功能正在开发中")
  console.log("账号 ", user.value.email);
  console.log("密码 ", user.value.password);
  console.log("username ", user.value.username);
}
</script>

<style scoped>
/* 自定义输入框移除默认背景 */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px white inset;
  transition: background-color 5000s ease-in-out 0s;
}
</style>